import Empty from '@/components/Empty';
import Tabs, { TabsProps } from '@/components/Tabs';
import { realTimeMonitoringControllerEmmuOverview } from '@/services/ess/realTimeMonitoring';
import { Flex, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { useDeviceInfo, useIsFresh, useSelectedDeviceNode } from '../SelectedDeviceNodeContext';
import AirData from './components/common/AirData';
import Dehumidifier from './components/common/Dehumidifier';
import FireMain from './components/common/FireMain';
import FireProtection from './components/common/FireProtection';
import LiquidCooling from './components/common/LiquidCooling';
import LiquidLeakageDetection from './components/common/LiquidLeakageDetection';
interface props {
  isGrgrounp?: boolean;
  ShowAIR_COOL?: boolean;
  ShowLIQUID_COOL?: boolean;
  ShowDEHUMIDIT?: boolean;
  ShowLEAK_DETECTOR?: boolean;
  ShowFIRE_DETECTOR?: boolean;
  ShowFIRE_HOST?: boolean;
}

export const EMMU: React.FC<props> = ({
  isGrgrounp,
  ShowAIR_COOL,
  ShowLIQUID_COOL,
  ShowDEHUMIDIT,
  ShowLEAK_DETECTOR,
  ShowFIRE_DETECTOR,
  ShowFIRE_HOST,
}) => {
  console.log('emu总的时候我就');

  const deviceNode = useSelectedDeviceNode();
  const { setDeviceInfo } = useDeviceInfo();
  const { isRefesh, setIsRefesh } = useIsFresh();
  const [loading, setLoading] = useState<boolean>(true);
  const [airConditionings, setAirConditionings] = useState<API.EmmuVo['airConditionings']>([]);
  const [liquidCoolings, setLiquidCoolings] = useState<API.EmmuVo['liquidCoolings']>([]);
  const [dehumidifiers, setDehumidifiers] = useState<API.EmmuVo['dehumidifiers']>([]);
  const [liquidLeakageDetections, setliquidLeakageDetections] = useState<
    API.EmmuVo['liquidLeakageDetections']
  >([]);
  const [fireCompositeTestings, setFireCompositeTestings] = useState<
    API.EmmuVo['fireCompositeTestings']
  >([]);
  const [fireControlHosts, setFireControlHosts] = useState<API.EmmuVo['fireControlHosts']>([]);
  const [isEmpty, setEmpty] = useState(false);
  const intl = useIntl();

  const fetchData = async () => {
    setLoading(true);
    realTimeMonitoringControllerEmmuOverview({
      areaId: deviceNode?.areaId?.toString() ?? undefined,
      deviceCode: deviceNode?.deviceCode ?? undefined,
    }).then((res) => {
      setLoading(false);
      setDeviceInfo({
        ts: res?.data?.ts ?? undefined,
        onLine:
          res?.data?.onlineState || String(res?.data?.onlineState) === '0'
            ? String(res?.data?.onlineState)
            : undefined,
      });

      setAirConditionings(res.data?.airConditionings?.length ? res.data?.airConditionings : []);
      setLiquidCoolings(res.data?.liquidCoolings?.length ? res.data?.liquidCoolings : []);
      setDehumidifiers(res.data?.dehumidifiers?.length ? res.data?.dehumidifiers : []);
      setliquidLeakageDetections(
        res.data?.liquidLeakageDetections?.length ? res.data?.liquidLeakageDetections : [],
      );
      setFireCompositeTestings(
        res.data?.fireCompositeTestings?.length ? res.data?.fireCompositeTestings : [],
      );
      setFireControlHosts(res.data?.fireControlHosts?.length ? res.data?.fireControlHosts : []);

      if (
        res.data?.airConditionings?.length ||
        res.data?.liquidCoolings?.length ||
        res.data?.dehumidifiers?.length ||
        res.data?.liquidLeakageDetections?.length ||
        res.data?.fireCompositeTestings?.length ||
        res.data?.fireControlHosts?.length
      ) {
        setEmpty(false);
      } else {
        setEmpty(true);
      }
    });
  };

  useEffect(() => {
    fetchData();
  }, [deviceNode]);

  useEffect(() => {
    if (isRefesh) {
      fetchData();
      setIsRefesh(false);
    }
  }, [isRefesh]);
  const items: TabsProps['items'] = [];

  if (airConditionings?.length) {
    items.push({
      key: 'AIR_COOL',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.arrCool' }),
      children: <AirData data={airConditionings} />,
    });
  }

  if (liquidCoolings?.length) {
    items.push({
      key: 'LIQUID_COOL',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.liquidCool' }),
      children: <LiquidCooling data={liquidCoolings} />,
    });
  }

  console.log(dehumidifiers?.length, '相应的额');

  if (dehumidifiers?.length) {
    items.push({
      key: 'DEHUMIDITY',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.dehumidity' }),
      children: <Dehumidifier data={dehumidifiers} />,
    });
  }

  if (liquidLeakageDetections?.length) {
    items.push({
      key: 'LEAK_DETECTOR',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.leakDetector' }),
      children: <LiquidLeakageDetection data={liquidLeakageDetections} />,
    });
  }

  if (fireCompositeTestings?.length) {
    items.push({
      key: 'FIRE_DETECTOR',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.fireDetector' }),
      children: <FireProtection data={fireCompositeTestings} />,
    });
  }

  if (fireControlHosts?.length) {
    items.push({
      key: 'FIRE_HOST',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.fireHost' }),
      children: <FireMain data={fireControlHosts} />,
    });
  }

  const changeContent = () => {
    if (ShowAIR_COOL) {
      return <AirData data={airConditionings} />;
    }

    if (ShowLIQUID_COOL) {
      return <LiquidCooling data={liquidCoolings} />;
    }

    if (ShowDEHUMIDIT) {
      return <Dehumidifier data={dehumidifiers} />;
    }

    if (ShowLEAK_DETECTOR) {
      return <LiquidLeakageDetection data={liquidLeakageDetections} />;
    }

    if (ShowFIRE_DETECTOR) {
      return <FireProtection data={fireCompositeTestings} />;
    }

    if (ShowFIRE_HOST) {
      return <FireMain data={fireControlHosts} />;
    }
    return null;
  };

  return (
    <Spin spinning={loading} style={{ minHeight: '100%' }}>
      {!isEmpty ? (
        isGrgrounp ? (
          <Tabs items={items}></Tabs>
        ) : (
          changeContent()
        )
      ) : (
        <Flex
          justify="center"
          align="center"
          style={{ width: '100%', height: '100%', marginTop: '290px' }}
        >
          <Empty />
        </Flex>
      )}
    </Spin>
  );
};
